This question is more of a generic one. I'm starting with object programming and am quickly getting lost. It's working but I feel that I am only lucky that it is because my code is not clean...and it'll not be scalable

1. can I leave this.rgb in the player construction function without defining it right away ? Would it be cleaner to create an "rgb function" that calculates the value (this.rgb = rgb)
2. is it disgusting to define the rgb variable inside the newButton function (which is kind of supposed to be about something else)
3. Do I really have to do this.newButton = newButton; (as seen on CDN) or is there a simpler/cleaner way ?
4. Bonus : I read mike and marks explanations on templates but I feel like I can do things quicker (and dirtier) with this very long string defining the button... how dirty is it ?

/*------------------------------------------

        Player definition   
        
-------------------------------------------*/

function newButton() {
    
    r = Math.floor(Math.random() * 100 + 100)
    g = Math.floor(Math.random() * 100 + 100)
    b = Math.floor(Math.random() * 100 + 100)
    this.rgb = "rgb(" + r + ","  + g + "," + b + ")";
    
    return button = `<button onclick="playerTimer(${this.playerNumber})" class="btn" style="background-color:${this.rgb}"><h3>Player ${this.playerNumber+1} </h3> <br><br> Time left:<h2><div id="playerTimerDiv${this.playerNumber}"> 30 </div></h2></button>`;
}

function Player(playerNumber, timeout, sec) {
  this.playerNumber = playerNumber;
  this.rgb
  this.timeout = timeout;
  this.sec =sec;
  this.div = document.createElement("div");
  this.newButton = newButton;
}

Thank you very much in advance for your help ! Sorry for this very long question....

Best regards,